<template>
    <div>
        <!--<el-row>-->
        <!--    <el-col :span="4" :offset="16">-->
        <!--        &lt;!&ndash;通过vuex获取用户名&ndash;&gt;-->
        <!--        <h4>{{$store.getters.getUname}}{{$store.state.uname}}{{uname}}</h4>-->
        <!--    </el-col>-->
        <!--</el-row>-->
        <!--layout布局，每行24分格-->

        <el-row>
            <el-col :span="15">
                <el-form :inline="true" :model="queryMap" class="demo-form-inline">
                    <el-form-item label="出发地点">
                        <el-input v-model="queryMap.departurePoint" placeholder="出发地点"></el-input>
                    </el-form-item>
                    <el-form-item label="到达地点">
                        <el-input v-model="queryMap.arrivalLocation" placeholder="到达地点"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="queryTicketInfo">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" @click="addTicketInfo">新增</el-button>
                <el-button type="primary" @click="updateTicketInfo">修改</el-button>
                <el-button type="primary" @click="delTicketInfo">删除</el-button>
            </el-col>
        </el-row>

        <el-table
            ref="multipleTable"
            :data="ticketInfoData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="id"
                label="车票id"
                width="70">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <!--<el-table-column-->
            <!--    prop="empno"-->
            <!--    label="员工工号"-->
            <!--    width="80">-->
            <!--    <template slot-scope="scope">{{ scope.row.empno }}</template>-->
            <!--</el-table-column>-->
            <el-table-column
                prop="empno"
                label="类型"
                width="60">
                <template slot-scope="scope">{{ scope.row.type }}</template>
            </el-table-column>
            <el-table-column
                prop="departurePoint"
                label="出发地点"
                width="90">
                <template slot-scope="scope">{{ scope.row.departurePoint }}</template>
            </el-table-column>
            <el-table-column
                prop="arrivalLocation"
                label="到达地点"
                width="90">
                <template slot-scope="scope">{{ scope.row.arrivalLocation }}</template>
            </el-table-column>
            <el-table-column
                prop="departureTime"
                label="出发时间"
                width="160">
                <template slot-scope="scope">{{ scope.row.departureTime }}</template>
            </el-table-column>
            <el-table-column
                prop="arrivalTime"
                label="到达时间"
                width="160">
                <template slot-scope="scope">{{ scope.row.arrivalTime }}</template>
            </el-table-column>
            <el-table-column
                prop="reimbursement"
                label="报销总金额"
                width="100">
                <template slot-scope="scope">{{ scope.row.reimbursement }}</template>
            </el-table-column>
            <el-table-column
                prop="photo"
                label="照片"
                width="60">
                <template slot-scope="scope">{{ scope.row.photo }}</template>
            </el-table-column>
            <el-table-column
                prop="instruction"
                label="出差信息说明"
                width="120">
                <template slot-scope="scope">{{ scope.row.instruction }}</template>
            </el-table-column>
            <el-table-column
                prop="travelInfoId"
                label="关联差旅信息"
                width="120">
                <template slot-scope="scope">{{ scope.row.travelInfoId }}</template>
            </el-table-column>
        </el-table>
        <!--        分页栏
                background  背景色
                layout  分页栏的显示内容
                page-sizes  代表每页显示条数的下拉框
                total  代表总条数
                 @size-change 每页显示条数切换时触发
                 @current-change 页码切换时触发
                 current-page 代表参数page
                 :page-size 代表参数limit-->
        <el-pagination
            background
            @size-change="getSize"
            @current-change="getCurrent"
            :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="queryMap.page"
            :page-size="queryMap.limit"
            :total="total">
        </el-pagination>
        <!--新增以及修改的弹出框-->
        <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" :rules="rules">
            <el-form ref="eForm" :model="ticketInfoForm" label-position="right" :rules="rules">
                <el-form-item label="车票id" :label-width="formLabelWidth" v-show="isIdShow">
                    <el-input v-model="ticketInfoForm.id" autocomplete="off" style="width: 400px"
                              :disabled="isTicketInfoDisabled"></el-input>
                </el-form-item>
                <!--<el-form-item label="员工工号" :label-width="formLabelWidth" prop="empno" v-show="isIdShow">-->
                <!--    <el-input v-model="ticketInfoForm.empno" autocomplete="off" style="width: 400px"></el-input>-->
                <!--</el-form-item>-->
                <el-form-item label="类型" :label-width="formLabelWidth" prop="type" >
                    <el-select v-model="ticketInfoForm.type" placeholder="选择类型" style="width: 400px" :disabled="isBackType">
                        <el-option
                            v-for="type in types"
                            :key="type.value"
                            :label="type.label"
                            :value="type.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出发地点" :label-width="formLabelWidth" prop="departurePoint">
                    <el-input v-model="ticketInfoForm.departurePoint" autocomplete="off" style="width: 400px" :disabled="isBackType"></el-input>
                </el-form-item>
                <el-form-item label="到达地点" :label-width="formLabelWidth" prop="arrivalLocation">
                    <el-input v-model="ticketInfoForm.arrivalLocation" autocomplete="off" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="出发时间" :label-width="formLabelWidth" prop="departureTime">
                    <el-date-picker
                        v-model="ticketInfoForm.departureTime"
                        type="datetime"
                        placeholder="选择日期"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        style="width: 400px">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="到达时间" :label-width="formLabelWidth" prop="arrivalTime">
                    <el-date-picker
                        v-model="ticketInfoForm.arrivalTime"
                        type="datetime"
                        placeholder="选择日期"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        style="width: 400px">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="交通工具" :label-width="formLabelWidth" prop="vehicleId">
                    <el-select v-model="ticketInfoForm.vehicleId" placeholder="交通工具" style="width: 400px">
                        <el-option v-for="transportation in transportationlist" :value="transportation.id"
                                   :key="transportation.name" :label="transportation.name"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="报销总金额" :label-width="formLabelWidth" prop="reimbursement">
                    <el-input v-model="ticketInfoForm.reimbursement" autocomplete="off" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="照片" :label-width="formLabelWidth" prop="photo">
                    <el-select v-model="ticketInfoForm.photo" placeholder="选择类型" style="width: 400px">
                        <el-option
                            v-for="photo in photos"
                            :key="photo.value"
                            :label="photo.label"
                            :value="photo.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="信息说明" :label-width="formLabelWidth" prop="instruction">
                    <el-input v-model="ticketInfoForm.instruction" autocomplete="off" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="关联差旅信息" :label-width="formLabelWidth" prop="travelInfoId">
                    <el-input v-model="ticketInfoForm.travelInfoId" autocomplete="off" style="width: 400px" :disabled=true></el-input>
                </el-form-item>
                <form id="uploadForm" method="post" enctype="multipart/form-data">
                    <input type="file" id="upload" name="upload" v-on:change="uploadFile()">
                </form>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveTicketInfo">确 定</el-button>
                <el-button @click="resetForm">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: "TicketInfolist",
    data() {
        return {
            isBackType: false,
            types: [{
                value: "出差",
                label: "出差"
            }, {
                value: "返回",
                label: "返回"
            }],
            photos: [{
               value: '有',
               label: '有'
            }, {
                value: '无',
                label: '无'
            }],

            ticketInfoData: [],  //表格数据
            queryMap: {
                page: 1,
                limit: 10,
                departurePoint: '',
                arrivalLocation: '',
                empno: this.$store.getters.getUid
            },
            /*分页信息*/
            total: 0,  //数据总条数
            checkData: [],  //选中的数据
            formTitle: "新增车票信息",  //弹出框的标题
            dialogFormVisible: false,  //控制弹出框显隐的值
            formLabelWidth: '120px',  //文本显示宽度
            ticketInfoForm: {
                id: 0,
                empno: this.$store.getters.getUid,
                departurePoint: '',
                arrivalLocation: '',
                departureTime: '',
                arrivalTime: '',
                vehicleId: '',
                reimbursement: 0,
                photo: '',
                travelInfoId: 0,
                type: ''
            },
            isIdShow: true,
            rules: {
                empno: [
                    {required: true, message: "输入员工姓名", trigger: "blur"}
                ],
                type: [
                    {required: true, message: "输入车票类型", trigger: "blur"}
                ],
                departurePoint: [
                    {required: true, message: "输入出发地点", trigger: "blur"}
                ],
                arrivalLocation: [
                    {required: true, message: "输入到达地点", trigger: "blur"}
                ],
                departureTime: [
                    {required: true, message: "输入出发时间", trigger: "blur"}
                ],
                arrivalTime: [
                    {required: true, message: "输入到达时间", trigger: "blur"}
                ],
                vehicleId: [
                    {required: true, message: "输入交通工具", trigger: "blur"}
                ],
                reimbursement: [
                    {required: true, message: "输入车票金额", trigger: "blur"}
                ],
                photo: [
                    {required: true, message: "输入照片信息", trigger: "blur"}
                ],
                instruction: [
                    {required: true, message: "输入车票说明", trigger: "blur"}
                ]
            },
            isTicketInfoDisabled: true,
            transportationlist: []
        }
    },
    methods: {
        uploadFile() {
            var formData = new FormData(document.getElementById("uploadForm"))
            this.$http.post("/uploadFile", formData).then(res => {

            })
        },
        /**
         * 表格的选中项发生变化时触发
         * @param val
         */
        handleSelectionChange(val) {
            //val是个数组对象，代表目前选中的表格数据
            console.log(val)
            this.checkData = val
        },
        /**
         * 加载表格中的员工信息
         */
        getTicketInfoData() {
            this.queryMap.empno = this.$store.getters.getUid
            //调用后台，获取数据
            this.$http.post("/ticketInfo/ticketInfoList", this.queryMap).then(res => {
                // console.log(res.data.data)
                //res.data  对应的是后台的return值
                debugger
                console.log(res.data.data)
                this.ticketInfoData = res.data.data  //列表数据
                this.total = res.data.count  //总条数
            })
        },

        addTicketInfo() {
            this.queryMap.empno = this.$store.getters.getUid
            this.$http.post("/ticketInfo/getMaxIdTicketInfo/" + this.queryMap.empno).then(res => {
                if (res.data.type === "返回") {
                    this.isBackType = true
                    this.ticketInfoForm.type = "出差"
                    this.ticketInfoForm.departurePoint = "济南"
                }
                else {
                    this.isBackType = false
                }
            })
            this.isIdShow = false
            this.dialogFormVisible = true
        },

        getTransportationData() {
            this.$http.get("transportation/transportationList01").then(res => {
                this.transportationlist = res.data
            })
        },

        /**
         * 查询表格数据
         */
        queryTicketInfo() {
            //重新从第一页开始显示
            this.queryMap.page = 1
            this.getTicketInfoData()
        },

        /**
         * 每页显示条数发生变化时触发
         * @param val  代表的是当前的每页显示条数
         */
        getSize(val) {
            this.queryMap.limit = val
            this.getTicketInfoData()
        },
        /**
         * 当前页码发生变化时触发
         * @param val  代表的是当前的page值
         */
        getCurrent(val) {
            this.queryMap.page = val
            this.getTicketInfoData()
        },
        /**
         * 删除员工数据
         */
        delTicketInfo() {
            if (this.checkData.length === 0) {
                this.$message.warning("请选择要删除的数据")
                return
            }

            for (var i = 0; i < this.checkData.length; i++) {
                if (this.checkData[i].travelInfoId !== 0) {
                    this.$message.warning("不可以删除已经报销的车票")
                    return
                }
            }

            //确认删除
            this.$confirm('确定要删除选中的数据吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {  //点击确定后执行的动作
                //执行删除动作
                let ids = []
                for (let i = 0; i < this.checkData.length; i++) {
                    ids[i] = this.checkData[i].id
                }
                //调用后台
                this.$http.post("/ticketInfo/delTicketInfo", ids).then(res => {
                    if (res.data === 'success') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        //重新加载表格数据
                        this.getTicketInfoData()
                    }
                })
            }).catch(() => {  //点击取消后执行的动作
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        /**
         * 保存新增员工信息
         */
        saveTicketInfo() {
            //表单验证
            this.$refs['eForm'].validate((valid) => {
                //如果校验都通过，那么valid为true
                if (valid) {
                    //请求后台。传递表单数据进行保存
                    if (this.ticketInfoForm.id === 0) {
                        //新增操作
                        this.$http.post("/ticketInfo/addTicketInfo", this.ticketInfoForm).then(res => {
                            if (res.data === "success") {
                                this.$message.success("新增成功")
                                this.getTicketInfoData()
                                this.dialogFormVisible = false
                                //清空表单数据以及提示信息
                                this.ticketInfoForm = {
                                    id: 0,
                                    empno: this.$store.getters.getUid,
                                    departurePoint: '',
                                    arrivalLocation: '',
                                    departureTime: '',
                                    arrivalTime: '',
                                    vehicle: '',
                                    reimbursement: 0,
                                    photo: '',
                                    travelInfoId: 0
                                }
                                this.$refs['eForm'].resetFields()
                            }
                        })
                    }
                    else {
                        //编辑操作
                        this.$http.post("/ticketInfo/updateTicketInfo", this.ticketInfoForm).then(res => {
                            if (res.data === "success") {
                                this.$message.success("修改成功")
                                this.getTicketInfoData()
                                this.dialogFormVisible = false
                                //清空表单数据以及提示信息
                                this.ticketInfoForm = {
                                    id: 0,
                                    empno: this.$store.getters.getUid,
                                    departurePoint: '',
                                    arrivalLocation: '',
                                    departureTime: '',
                                    arrivalTime: '',
                                    vehicle: '',
                                    reimbursement: 0,
                                    photo: '',
                                    travelInfoId: 0
                                }
                                this.$refs['eForm'].resetFields()
                            }
                        })
                    }
                }
                else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        /**
         * 修改员工信息
         */
        updateTicketInfo() {
            if (this.checkData.length === 0) {
                this.$message.warning("请选择要修改的车票信息")
                return
            }
            if (this.checkData.length > 1) {
                this.$message.warning("只能选择一条车票信息进行修改")
                return
            }
            if (this.checkData[0].travelInfoId !== 0) {
                this.$message.warning("不可以修改已经报销的车票")
                return
            }

            //根据员工编号查询员工信息
            let id = this.checkData[0].id
            this.$http.get("/ticketInfo/getTicketInfo/" + id).then(res => {
                this.ticketInfoForm = res.data
                this.dialogFormVisible = true
                this.isIdShow = true
                this.formTitle = "修改员工信息"
            })
        },
        /**
         * 清空表单数据
         */
        resetForm() {
            this.dialogFormVisible = false
            this.ticketInfoForm = {
                id: 0,
                empno: this.$store.getters.getUid,
                departurePoint: '',
                arrivalLocation: '',
                departureTime: '',
                arrivalTime: '',
                vehicle: '',
                reimbursement: 0,
                photo: '',
                travelInfoId: 0
            }
            this.$refs['eForm'].resetFields()
        }
    },
    mounted() {
        //可以访问sessionStorage对象获取数据
        this.uname = sessionStorage.getItem("uname")
        this.ticketInfoForm.empno = this.$store.getters.getUid
        this.queryMap.empno = this.$store.getters.getUid

        //初始加载表格数据
        this.getTicketInfoData()
        this.getTransportationData()
    }
}
</script>

<style scoped>

</style>